<template>
  <div class="category">
    <ul class="left">
      <li
      v-for="category in categories"
      :key="category.id"
      is="router-link"
      :to="{ name: 'subcategory', params: { helleo: category.id} }"
      tag="li"
      >{{ category.name }}</li>
   </ul>
   <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      categories: []
    }
  },
  created() {
    console.log(this.$http)
    this.$http.getCategories()
      .then(data => {
        // list数据里面的
        data.list.shift()
        this.categories = data.list
      })
      .then(() => {
        if (typeof this.$route.params.helleo === 'undefined') {
          this.$router.push({
            name: 'subcategory',
            params: {
              helleo: this.categories[0].id
            }
          }).catch(() => {})
        }
      })
  },
  beforeRouteUpdate(to, from, next) {
    // console.log('to: ', to)
    if (to.path === '/category') {
      next(false)
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
  .category {
    display: flex;
    height:100%;
    width:100%;
    .left {
      width: 100px;
      background: #eee;
      overflow-x: hidden;

      li {
        border: none;
        height: 40px;
        line-height: 28px;
        padding: 6px;
        font-size: 15px;
        font-weight: 700;
      }
    }
    .right {
      flex: 1;
      overflow-x: hidden;
    }
    .router-link-exact-active.router-link-active {
      background: #fff;
      border-left: 3px solid #666;
    }
  }
</style>
